<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        margin: 0 auto;
        border: 1px blue solid;
    }
    div > img{
        cursor: pointer;
    }
    div > ul {
        display: inline-block;
        padding-left: 0px;
        margin-left: 10px;
        clear: both;

    }
    div > ul > li{
        list-style: none;
        border: 1px green solid;
        width: 20px;
        background-color: gray;
        text-align: center;
        padding-top: 5px;
        cursor: pointer;
    }
</style>

<body>
<div>
    <img src="images/dd_scroll_1.jpg" alt="" id="img" onmousemove="stop()" onmouseout="start()">
    <ul>
        <li id="li1" onmouseover="stopTu(this)" onmouseout="recovery(this)">1</li>
        <li id="li2" onmouseover="stopTu(this)" onmouseout="recovery(this)">2</li>
        <li id="li3" onmouseover="stopTu(this)" onmouseout="recovery(this)">3</li>
        <li id="li4" onmouseover="stopTu(this)" onmouseout="recovery(this)">4</li>
        <li id="li5" onmouseover="stopTu(this)" onmouseout="recovery(this)">5</li>
        <li id="li6" onmouseover="stopTu(this)" onmouseout="recovery(this)">6</li>
    </ul>
</div>
</body>

<script>
    let dsq,dsq1;
    //标记value的值是否为7
    let flag=0;
    //正则表达式匹配数字
    let value = document.getElementById('img').getAttribute('src').match(/\d+(\.\d)?/g);

    //网页加载完成开始图片滚动
    window.onload = function () {
        //获取第一个li让他一开始就变红，就是当前的图片
        let li = document.getElementsByTagName('li')[0];
        li.style.backgroundColor = 'red';
        //设置定时器,每1500描ms切换一张图
        dsq = setInterval("scroll()",1500);
        //li颜色显示
        autoScroll();
    }

    //li标签自动显示
    function autoScroll() {
        //li的定时器
        dsq1 = setInterval(function () {
            //为了选中第6个标签
            if (flag == 1) value = 7;
            let li = document.getElementsByTagName('li')[value-2];
            //当前value值要重置为1
            if (flag == 1) value =1;
            li.style.backgroundColor = 'gray';
        },1500)
    }

    //图片自动切换
    function scroll() {
        flag = 0;
        let img = document.getElementById('img');
        value ++;
        if (value == 7){
            value =1;
            flag = 1;
        }

        //当前的li标签跟随图片显示红色
        let li = document.getElementsByTagName('li')[value-1];
        li.style.backgroundColor = 'red';

        img.setAttribute('src','images/dd_scroll_' + value +'.jpg')

    }

    // 鼠标放上去时暂停所有定时器
    function stop(){
        window.clearInterval(dsq);
        window.clearInterval(dsq1);
    }

    // 鼠标离开时开始所有定时器
    function start() {
        dsq = setInterval("scroll()",1500);
        autoScroll();
    }

    //鼠标放上li标签时停止所有定时器
    function stopTu(obj) {
        stop();

        //让鼠标放上li前的li标签的颜色置为灰色 注意下标从0开始
        let li = document.getElementsByTagName('li')[value-1];
        li.style.backgroundColor = 'gray';

        //当前鼠标
        let object = document.getElementById('img');
        object.setAttribute('src','images/dd_scroll_' + obj.innerHTML +'.jpg')
        obj.style.backgroundColor = 'red';

        //让鼠标离开后从鼠标离开的那张图片开始动
        value = obj.innerHTML;
    }

    //鼠标离开li标签时恢复定时器
    function recovery(obj) {
        start();
        // obj.style.backgroundColor = 'gray';
    }
</script>

</html>